<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>StatiCrypt: Password protect static HTML</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         body {
         font-size: 18px;
         }
      </style>
      <link rel="stylesheet"
         type="text/css"
         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
         crossorigin="anonymous">
      <link rel="stylesheet" href="{{site.url}}{{site.baseurl}}/assets/typora/vue.css">
      <!-- font awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
      <!-- change font -->
      <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600&amp;subset=greek,greek-ext,latin-ext" rel="stylesheet" async>
   </head>
   <body>
      <div class="topnav" id="topnav">
         <a href="https://yk-liu.github.io"   class="active"   >Home</a>
         <a href="https://yk-liu.github.io/blog" target="_blank"  >Posts</a>
         <a href="https://yk-liu.github.io/blog/tags" target="_blank"  >Tags</a>
         <a href="https://yk-liu.github.io/about"  >About</a>
         <a href="https://github.com/yk-liu" target="_blank" style="text-decoration:none;float: right;">
         <i class="fab fa-github fa-lg" ></i>
         </a>
      </div>
      <!-- link to topbar.css-->
      <link rel="stylesheet" href="{{site.url}}{{site.baseurl}}/assets/css/topbar.css">
      <div class="container">
         <div class="row">
            <h2>Encryption Setup</h2>
            <form id="encrypt_form">
               <div class="form-group">
                  <label for="passphrase">Password</label>
                  <input type="password" class="form-control" id="passphrase"
                     placeholder="Password (choose a long one!)">
               </div>
               <div class="form-group">
                  <label for="unencrypted_html">HTML to encrypt</label>
                  <textarea class="form-control" id="unencrypted_html" placeholder="<html><head>..."
                     rows="3"></textarea>
               </div>
               <div class="form-group">
                  <label for="title">Page title</label>
                  <input type="text" class="form-control" id="title" placeholder="Default: 'This page is Protected'">
               </div>
               <div class="form-group">
                  <label for="instructions">Instructions to display the user</label>
                  <input class="form-control" id="instructions" placeholder="Default: 'Contact blog owner for passphrase' ">
               </div>
               <button class="btn btn-primary pull-right" type="submit">Generate protected HTML</button>
            </form>
         </div>
         <div class="row">
            <h3>Encrypted HTML</h3>
            <pre id="encrypted_html_display">
Your encrypted string</pre>
            <p class="pull-right"><a class="btn btn-success download"
               download="encrypted.html"
               id="download-link"
               >Download html file with password prompt</a></p>
         </div>
      </div>
      <!--
         Crypto JS 3.1.9-1
         Copied as is from https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js
         Filename changed to circumvent adblockers that mistake it for a crypto miner (see https://github.com/robinmoisson/staticrypt/issues/107)
         -->
      <script src="{{site.url}}{{site.baseurl}}/secret/encrypt/kryptojs-3.1.9-1-lib.js"></script>
      <script>
         var htmlToDownload;
         
         var renderTemplate = function (tpl, data) {
             return tpl.replace(/{(.*?)}/g, function (_, key) {
                 return data && data[key] || '';
             });
         };
         
         /**
          * Fill the password prompt template with data provided.
          * @param data
          */
         var setFileToDownload = function (data) {
             var request = new XMLHttpRequest();
             request.open('GET', '{{site.url}}{{site.baseurl}}/secret/encrypt/decrypt-template.html', true);
             request.onload = function() {
                 var renderedTmpl = renderTemplate(request.responseText, data);
         
                 var downloadLink = document.querySelector('a.download');
                 downloadLink.href = 'data:text/html,' + encodeURIComponent(renderedTmpl);
                 downloadLink.removeAttribute('disabled');
         
                 htmlToDownload = renderedTmpl;
             };
             request.send();
         };
         
         /**
          * Handle form submission.
          */
         document.getElementById('encrypt_form').addEventListener('submit', function (e) {
             e.preventDefault();
           
             var unencrypted = document.getElementById('unencrypted_html').value;
             var passphrase = document.getElementById('passphrase').value;
         
             var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);
             var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase).toString()).toString();
             var encryptedMsg = hmac + encrypted;
         
             var pageTitle = document.getElementById('title').value.trim();
             var instructions = document.getElementById('instructions').value;
             var data = {
                 title: pageTitle ? pageTitle : 'Protected Page',
                 instructions: instructions ? instructions : 'Contact blog owner for passphrase',
                 encrypted: encryptedMsg
             };
         
             document.getElementById('encrypted_html_display').textContent = encryptedMsg;
         
             setFileToDownload(data);
             
         
         });
         
          /**
          * Browser specific download code.
          */
         document.getElementById('download-link')
             .addEventListener('click', function (e) {
         
             var isIE = (navigator.userAgent.indexOf("MSIE") !== -1 ) || (!!document.documentMode === true ); // >= 10
             var isEdge = navigator.userAgent.indexOf("Edge") !== -1;
         
             // download with MS specific feature
             if (htmlToDownload && (isIE || isEdge)) {
                 e.preventDefault();
                 var blobObject = new Blob([htmlToDownload]);
                 window.navigator.msSaveOrOpenBlob(blobObject, 'encrypted.html');
             }
         
             return true;
         })
      </script>
   </body>
</html>